<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>国家贸易趋势</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        .container { height: 90vh; }         /* 整体容器高度占视口90% */
        .top-section { height: 90%; }       /* 上方区域占整体90% */
        .input-area { height: 10%; padding: 10px; }  /* 输入区占上方区域10% */
        .chart { height: 90%; }             /* 图表区占上方区域90% */
        .query { height: 10%; padding: 10px; }       /* 下方查询区占整体10% */
    </style>
</head>
<body>
<div class="container">
    <div class="top-section">
        <!-- 国家代号说明：与表1的"国家标签"字段（数字类型）一致 -->
        <div class="input-area">
            <input type="text" id="dateRange" placeholder="时间范围（如2010-01:2020-12）">
            <input type="text" id="countryCode" placeholder="国家代号（数字，与表1的'国家标签'一致）">
            <button onclick="loadCountryHistory()">加载历史趋势</button>
        </div>
        <div class="chart" id="countryChart"></div>
    </div>
    <div class="query">
        <input type="text" id="predictTime" placeholder="输入预测时间（如2021-01）">
        <button onclick="queryCountry()">查询预测</button>
        <div id="predictResult"></div>
    </div>
</div>
<script>
    const chart = echarts.init(document.getElementById('countryChart'));

    // 新增：加载国家历史数据
    function loadCountryHistory() {
        const dateRange = document.getElementById('dateRange').value;
        const countryCode = document.getElementById('countryCode').value;

        // 时间格式校验（同overall.html）
        if (!/^\d{4}-\d{2}:\d{4}-\d{2}$/.test(dateRange)) {
            alert('时间范围格式错误！示例：2010-01:2020-12');
            return;
        }
        // 国家号数字校验
        if (!/^\d+$/.test(countryCode)) {
            alert('国家代号需为纯数字！');
            return;
        }

        const [start, end] = dateRange.split(':');
        fetch(`/api/history/country?start=${start}&end=${end}&country=${countryCode}`)
            .then(res => res.json())
            .then(data => {
                chart.setOption({
                    title: { text: `国家 ${countryCode} 贸易趋势` },
                    xAxis: { type: 'category', data: data.times },
                    yAxis: { type: 'value' },
                    series: [
                        { name: '出口额', type: 'line', data: data.exports },
                        { name: '进口额', type: 'line', data: data.imports }
                    ]
                });
            });
    }

    // 已有逻辑优化（保持原有预测功能）
    function queryCountry() {
        const time = document.getElementById('predictTime').value;
        const country = document.getElementById('countryCode').value;
        if (!/^\d{4}-\d{2}$/.test(time)) {  /* 预测时间格式校验 */
            alert('预测时间格式错误！示例：2021-01');
            return;
        }
        if (!/^\d+$/.test(country)) {
            alert('国家代号需为纯数字！');
            return;
        }
        fetch('/api/predict/country', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ time, country })
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById('predictResult').innerHTML = 
                `预测结果：出口额 ${data.export}，进口额 ${data.import}`;
        });
    }
</script>
</body>
</html>